<template>
  <div class="table-page">
    <el-table :data="tableData" border>
      <el-table-column prop="number" label="事件编号" min-width="140" />
      <el-table-column prop="type" label="事件类型" width="90" />
      <el-table-column prop="grade" label="事件等级" width="90" />
      <el-table-column prop="date" label="发生时间" min-width="140" />
      <el-table-column prop="position" label="发生地点" />
      <el-table-column prop="carnumber" label="车牌号" width="100" />
      <el-table-column prop="person" label="驾驶员" />
      <el-table-column prop="status" label="处理状态" />
    </el-table>
    <div class="page-footer">
      <el-pagination
        layout="prev, pager, next"
        :total="queryResultData.length"
        v-model:current-page="tablePage"
        v-model:page-size="pageSize"
        size="large"
      />
      <el-button @click="handleExport(tableData, '事故信息')" class="export-btn">
        <span>导出</span>
        <i class="iconfont icon-export"></i>
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { inject, ref, computed } from 'vue'
import { handleExport } from '@/utils/toolsFn'

const queryResultData = inject('queryResultData')

const tablePage = ref(1)
const pageSize = ref(5)

const tableData = computed(() => {
  const start = (tablePage.value - 1) * pageSize.value
  const end = start + pageSize.value
  const filteredData = queryResultData.value.slice(start, end)
  const statusText = (code) => {
    switch (code) {
      case '0':
        return '待处理'
      case '1':
        return '处理中'
      case '2':
        return '已归档'
    }
  }
  const formattedData = filteredData.map((item) => {
    const { status, ...rest } = item
    return {
      ...rest,
      status: statusText(status),
    }
  })
  return formattedData
})
</script>

<style lang="scss" scoped>
.table-page {
  .page-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    .el-pagination {
      justify-content: center;
    }
    .export-btn {
      span {
        margin-right: 5px;
      }
    }
  }
}
</style>
